<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" @submit.native.prevent>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="listQuery.startTime"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="listQuery.endTime"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="商家">
        <el-select
          class="toolbar-lable-right"
          size="small"
          v-model="listQuery.sellerId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optStateValues"
            :key="item.id"
            :label="item.sellerName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="this.getList">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div id="yxkj-echarts">
      <yxkj-chart :dataJson="dataJson" />
    </div>
    <el-divider content-position="left"><legend class="divider-line">说明</legend></el-divider>
    <div class="tips">
      <p>全国订单分布统计，按照各个省来统计，统计已完成订单的总金额。</p>
      <p>默认统计全部，可以选择指定日期，按照商家来统计。</p>
    </div>
  </div>
</template>
<script>
import { getSellers } from "@/api/all";
import { chinaorderJsonList, fetchMemberListList } from "@/api/all";
import YxkjChart from '@/components/Charts/YxkjChart'
import { Message } from 'element-ui';
export default {
  name: 'chinaOverflow',
  components: { YxkjChart },
  data() {
    return {
      optStateValues: [],
      listQuery: {
        startTime: '',
        endTime: '',
        sellerId: ""
      },
      dataJson: []
    }
  },
  created() {
    getSellers().then(res=>{
      this.optStateValues = res.data.rows
    })

    this.getList();
  },
  methods: {
    getList() {
      if(this.listQuery.startTime != '') {
        if(this.listQuery.endTime == '') {
          Message.error('请选择结束时间')
          return
        }
      }
      if(this.listQuery.endTime != '') {
        if(this.listQuery.startTime == '') {
          Message.error('请选择开始时间')
          return
        }
      }
      chinaorderJsonList(this.listQuery).then(res=>{
        this.dataJson = []
        for(let i in res.data.data) {
          this.dataJson.push(res.data.data[i])
        }
      });
    },
    reset() {
      this.listQuery.startTime = '';
      this.listQuery.endTime = '';
      this.listQuery.sellerId = '';
      this.getList();
    },
  }
}
</script>
<style lang="scss" scoped>
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
.tips {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
  p {
    font-size: 14px;
    color: #5e6d82;
    line-height: 0.5em;
  }
}
</style>
